<template>
    <IContent :spinShow="loading">
        <ISearch v-model="search">
            <Row>
                <FormItem label="状态">
                    <RadioGroup v-model="search.status" type="button" size="small">
                        <Radio label="">全部</Radio>
                        <Radio :label="0">待上架</Radio>
                        <Radio :label="1">已上架</Radio>
                    </RadioGroup>
                </FormItem>
            </Row>
            <FormItem label="上架单号">
                <Input v-model="search.code" placeholder="上架单号" size="small"></Input>
            </FormItem>
            <FormItem label="理货单号">
                <Input v-model="search.tally_code" placeholder="理货单号" size="small"></Input>
            </FormItem>
            <FormItem label="入库单号">
                <Input v-model="search.warehousing_code" placeholder="入库单号" size="small"></Input>
            </FormItem>
            <FormItem label="产品代码">
                <Input v-model="search.product_code" placeholder="产品代码" size="small"></Input>
            </FormItem>
            <FormItem label="产品条码">
                <Input v-model="search.barcode" placeholder="产品条码" size="small"></Input>
            </FormItem>
            <FormItem :label-width="1">
                <Button type="primary" icon="ios-search" @click="getLists(1)" size="small">搜索</Button>
            </FormItem>
        </ISearch>
        <ITable :current="page.current" :table="table" :total="page.total" @on-page-change="pageChange">
            <template slot-scope="{ row, index }" slot="attribute">
                <span v-if="row.attribute === 0">良品</span>
                <span v-if="row.attribute === 1">不良品</span>
                <span v-if="row.attribute === 2">可销售不良品</span>
            </template>
            <template slot-scope="{ row, index }" slot="status">
                <span v-if="row.status === 0">待上架</span>
                <span v-if="row.status === 1">已上架</span>
            </template>
            <template slot-scope="{ row, index }" slot="product_name">
                <span>{{row.product.title}}</span>
            </template>
            <template slot-scope="{ row, index }" slot="product_code">
                <span>{{row.product.code}}</span>
            </template>
            <template slot-scope="{ row, index }" slot="warehousing">
                <span>{{row.warehousing.code}}</span>
            </template>
            <template slot-scope="{ row, index }" slot="tally">
                <span>{{row.tally.code}}</span>
            </template>
            <template slot-scope="{ row, index }" slot="location">
                <span v-if="row.location !== null">{{row.location.code}}</span>
            </template>
            <template slot-scope="{ row, index }" slot="action">
                <Button size="small" v-if="row.status === 0" @click="openComponent('IIView', {id: row.id})">上架</Button>
            </template>
        </ITable>

        <component v-if="componentProps.value" :is="componentProps.view" v-model="componentProps.value"
                   :props="componentProps.props" @input="getLists"></component>
    </IContent>
</template>

<script>
    import contentListPage from "../../../mixins/contentListPage";
    import IContent from "../../../components/content/index";
    import ISearch from "../../../components/content/search";
    import ITable from "../../../components/content/table";
    import contentDrawer from "../../../mixins/contentDrawer";
    import RemoteSelect from "../../../components/form/remoteSelect";
    import IIView from './view'

    export default {
        name: "index",
        components: {RemoteSelect, ITable, ISearch, IContent, IIView},
        mixins: [contentListPage, contentDrawer],
        data() {
            return {
                table: {
                    columns: [
                        {
                            title: '上架单号',
                            key: 'code'
                        }, {
                            title: '入库单号',
                            slot: 'warehousing'
                        }, {
                            title: '理货单号',
                            slot: 'tally'
                        },
                        {
                            title: '产品名称',
                            slot: 'product_name'
                        },
                        {
                            title: '产品代码',
                            slot: 'product_code'
                        },
                        {
                            title: '产品条码',
                            key: 'barcode'
                        },
                        {
                            title: '产品数量',
                            key: 'quantity'
                        },
                        {
                            title: '批次号',
                            key: 'batch'
                        },
                        {
                            title: '产品属性',
                            slot: 'attribute'
                        }, {
                            title: '状态',
                            slot: 'status'
                        }, {
                            title: '货架号',
                            slot: 'location'
                        }, {
                            title: '操作',
                            slot: 'action'
                        }
                    ]
                },
                search: {}
            }
        },
        methods: {
            getLists(page) {
                this.loading = true;
                this.$http.get(`warehousing/shelves`, {
                    params: Object.assign({}, this.search, {page: page})
                }).then((data) => {
                    this.table.data = data.data
                    this.page.total = data.total
                    this.page.current = data.current_page
                }).finally(() => {
                    this.loading = false;
                });
            }
        }
    }
</script>

<style scoped>

</style>
